<template>
  <vue-draggable-resizable
    class="cert-search"
    v-if="visible"
    :resizable="false"
    :x="0"
    :y="0"
    :w="700"
    :h="400"
    :z="2001">
      <el-card
        :body-style="{padding: '20px 10px'}"
        shadow="always"
        class="cert-search-card">
          <div slot="header" class="card-header">
            <span>高级搜索</span>
            <div style="float:right; padding:3px 0">
              <el-button
                v-if="bodyVisible"
                style="padding:0"
                type="text"
                @click="toggleBody()"
                icon="el-icon-upload2">折叠</el-button>

              <el-button
                v-else
                style="padding:0"
                type="text"
                @click="toggleBody()"
                icon="el-icon-download">展开</el-button>

              <el-button
                style="padding:0"
                type="text"
                @click="close()">关闭搜索</el-button>
            </div>
          </div>

          <div class="search-body" v-show="bodyVisible">
            <el-form
              ref="searchFormRef"
              :model="searchForm"
              label-width="70px">
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="姓名" prop="realname">
                      <el-input v-model="searchForm.realname" clearable placeholder="姓名" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="11" :offset="1">
                    <el-form-item label="部门" prop="deptId">
                    <el-cascader
                      filterable
                      clearable
                      :options="formProps.deptTree"
                      v-model="searchForm.deptIds"
                      :props="{
                          label: 'name',
                          value: 'id',
                          checkStrictly: true
                        }"
                      style="width:100%">
                      <template slot-scope="{node, data}">
                        <span>{{ data.name }}</span>
                      </template>
                    </el-cascader>
                  </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="11">
                    <el-form-item label="工种">
                      <el-select style="width:100%" filterable v-model="searchForm.craftId" placeholder="请选择工种" clearable>
                        <el-option
                          v-for="item in formProps.craftList"
                          :key="item.value"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="11" :offset="1">
                    <el-form-item label="证件类型">
                      <el-select style="width:100%" v-model="searchForm.certType" filterable placeholder="请选择证件类型" clearable>
                        <el-option
                          v-for="item in formProps.certTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="11">
                    <el-form-item label="发证日期">
                      <el-date-picker
                        clearable
                        style="width:100%"
                        v-model="searchForm.certOpenDateTimeStr"
                        type="date"
                        placeholder="发证日期"
                        value-format="yyyy-MM-dd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="11" :offset="1">
                    <el-form-item label="身份证号">
                      <el-input v-model="searchForm.identityCard" clearable placeholder="身份证号" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="11">
                    <el-form-item label="有效期始">
                      <el-date-picker
                        style="width:100%"
                        v-model="searchForm.certStartTimeStr"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="开始时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="11" :offset="1">
                    <el-form-item label="有效期末">
                      <el-date-picker
                        style="width:100%"
                        v-model="searchForm.certEndTimeStr"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="结束时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="11" :offset="12">
                    <el-form-item style="textAlign:right">
                      <el-button type="primary" @click="doSearch()">搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
          </div>
      </el-card>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
  name: 'certSearch',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      visible: false,
      bodyVisible: true,
      searchForm: {
        realname: '',
        deptId: null,
        deptIds: [],
        craftId: null,
        certOpenDateTimeStr: '',
        certStartTimeStr: '',
        certEndTimeStr: '',
        certType: '',
        identityCard: ''
      }
    }
  },
  methods: {
    async doSearch () {
      this.$emit('onSearched', this.searchForm)
    },
    open () {
      this.$store.dispatch('user/loadDeptList')
      this.$store.dispatch('user/loadCraftList')
      this.$store.dispatch('user/loadCertTypeList')
      this.visible = true
      this.$nextTick(() => this.$refs.searchFormRef.resetFields())
    },
    close () {
      this.$emit('onCancel')
      this.visible = false
    },
    toggleBody () {
      this.bodyVisible = !this.bodyVisible
    }
  },
  watch: {
    'searchForm.deptIds' (val) {
      if (val && val.length > 0) {
        this.searchForm.deptId = val[val.length - 1]
      } else {
        this.searchForm.deptId = null
      }
    }
  },
  computed: {
    formProps () {
      return {
        deptTree: this.$store.getters['user/deptTree'],
        craftList: this.$store.getters['user/craftList'],
        certTypeList: this.$store.getters['user/certTypeList']
      }
    }
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
  .cert-search {
    position: absolute;
    border: none;
    .cert-search-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>
